<template>
	<view :class="mode">
		<view :class="mode=='pc'?'py-8':'p-2'" style="background: linear-gradient( 180deg, #597EF7 20%, rgba(89,126,247,0) 100%) no-repeat;">
			<view class="mx-auto bg-white rounded-md" :class="mode=='pc'?'max-w-1200 p-6':'p-2'">
				<view class="flex justify-between items-center mb-6">
					<view class="text-xl">{{title}}</view>
					<!-- <view class="cursor-pointer" style="color: #597EF7;font-size: 12px;">?账号申请教程</view> -->
				</view>
				<el-steps direction="vertical" :active="2" :space="50">
					<el-step title="选择云厂商">
						<template #description>
							<view class="flex flex-wrap gap-4 py-4">
								<view  v-for="(item,index) in btnList" :key="index" :class="{'activeBtn':activeIndex==item.path}" @click="clickBtn(item)"
								class="border border-black__10 flex items-center rounded py-3 cursor-pointer justify-center" style="width: 280rpx;">
									<image :src="item.icon" style="width: 24px; height: 24px;"></image>
									<view class="ml-2">{{item.text}}</view>
								</view>
							</view>
						</template>
					</el-step>
					<el-step title="选择或填写预充金额">
						<template #description>
							<view class="py-4 text-black__75">
								<view class="flex items-center border rounded p-2" :style="mode=='pc'?'max-width:625px;':'width:570rpx;'" style="border:1px solid #597EF7;background-color: #597EF720;">
									<uni-icons type="info-filled" size="16" color="#597EF7"></uni-icons>
									<view class="ml-2" style="color: #597EF7;">
										尊敬的用户，为防止有人大批量申请账号，申请账号需要预先支付充值金额！
									</view>
								</view>
								<view class="flex text-base py-4 flex-wrap" :class="mode=='pc'?'gap-4':'gap-2 flex-1'">
									<view v-for="(item,index) in numList" :key="index" class="border border-black__10 rounded text-black__50 flex items-center p-2 cursor-pointer" 
									style="width: 260rpx;"  @click="clickBtn2(item.num)" :class="{'activeBtn':inputNum==item.num}">
										{{item.num}}
									</view>
									<el-input v-model="inputNum" style="width: 300rpx;height: 76rpx;" placeholder="手动输入充值金额" />
								</view>
								<view class="flex flex-col gap-2">
									<view class="flex items-center text-md">
										实付金额：
										<view style="color: #597EF7;">{{inputNum||0}} USD</view>
									</view>
								</view>
								<el-button type="primary" round class="mt-4 w-64" size="large"  @click="zhifuFn">确认支付</el-button>
							</view>
						</template>
					</el-step>
					<el-step title="USDT-TRC20扫码支付" status="wait">
						<template #description v-if="dialog.successList&&dialog.successList.length>0">
							<view >申请记录</view>
							<el-card style="max-width: 480px" v-for="(item,index) in dialog.successList" :key="index">
								<view>AWS国际云官网：https://aws.amazon.com/</view>
								<view>UID：{{item.accountUin}}</view>
								<view>账户邮箱：{{item.email}}</view>
								<view>邮箱密码：{{item.emailPassword}}</view>
								<view>登录地址：<el-link type="primary" :href="item.emailLoginUrl" target="_blank">{{item.emailLoginUrl}}</el-link></view>
								<view>登录名称：{{item.loginName}}</view>
								<view>登录密码：{{item.password}}</view>
							</el-card>
						</template>
					</el-step>
				</el-steps>

			</view>
		</view>
		<view class="py-4" style="background:rgba(89,126,247,0);">
			<view class="mx-auto rounded-md" :class="mode=='pc'?'max-w-1200 p-6':'p-2'">
				<view class="flex justify-between items-center" :class="mode=='pc'?'mb-6':'mb-2'">
					<view class="text-xl">网络安全承诺</view>
				</view>
				<view class="flex leading-6 items-center" :class="mode=='pc'?'gap-8':'h-24 overflow-hidden gap-2'">
					<view class="text-black__50 text-sm" :class="mode=='pc'?'':'text-clamp-3'">
					    您承诺不散布电子广告、垃圾信息：不利用我们提供的服务散发大量不受欢迎的或者未经请求的电子广告或包含反动、色情等有害信息,不得将阿里云、腾讯云、AWS所提供的服务用作虚拟服务器、或用作磁盘空间出租，或用作非法代理服务器（Proxy）或邮件服务器（根据《云平台安全规则》，未经报备许可服务不得用于连接SMTP服务发送邮件，默认禁止SMTP服务）
					</view>
					<el-button type="primary">查看详情</el-button>
				</view>
			</view>
		</view>
		
		<view class="py-4" style="background:rgba(89,126,247,0);">
			<view class="mx-auto rounded-md bg-white" :class="mode=='pc'?'max-w-1200 p-8':'p-2'">
				<view class="flex justify-between items-center" :class="mode=='pc'?'mb-2':'mb-2'">
					<view class="text-xl">网络安全承诺</view>
				</view>
				<view class="flex leading-6 items-center flex-wrap justify-between" :class="mode=='pc'?'gap-8':'gap-2'">
					<view v-for="(item,index) in btnList3" :key="index" class="flex flex-col" :style="mode=='pc'?'width:250px':'width: 340rpx;'">
						<image :src="item.icon" class="mx-auto" style="width: 120px;height: 120px;margin: 0 auto;"></image>
						<view class="text-center text-xs">{{item.text}}</view>
						<view class="text-xs text-black__50 text-center text-clamp-3">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
		<el-dialog v-model="dialog.show" title="扫码支付" width="500" @closed="closeFn" :z-index="10">
			<view class="flex justify-center items-center flex-col gap-4">
				<view class="text-base" style="color: #597EF7;">支付方式:[USDT(TRC20)1,请打开 APP 扫码支付!有效期30分钟</view>
				<view class="font-bold text-base flex">
					剩余时间：<uni-countdown :minute="30" :second="0" :showDay="false" :showHour="false" @timeup="timeupFn"></uni-countdown>
				</view>
				<view class="border border-black__20 p-4 rounded flex justify-center items-center flex-col gap-2">
					<view class="text-black__50">需要支付 USDT(TRC20)</view>
					<view class="text-black text-xl font-bold">$ {{dialog.info.actualAmount}}</view>
					<image style="width:600rpx;height: 600rpx;" :src="dialog.info.qrcodeUrl"></image>
				</view>
				<view>
					钱包地址:{{dialog.info.payKey}} <el-button class="ml-2" size="small" type="primary" @click="setClipboardData(dialog.info.payKey)">复制</el-button>
				</view>
				<view style="color: red;">支付金额必须相同，否则订单将无效</view>
			</view>
		</el-dialog>
		

		<footerPage></footerPage>
		<tabBar v-if="mode=='app'"></tabBar>
		<appMeum v-if="mode=='app'"></appMeum>
	</view>
</template>

<script>
	let timer
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				title: '阿里云国际账号申请',
				activeIndex:'/pages/applyAccount/AWSCloud/AWSCloud',
				btnList: [{
						icon: '/static/home/aliyun_icon.png',
						text: '阿里云国际',
						path:'/pages/applyAccount/aliyun/aliyun'
					},
					{
						icon: '/static/home/tencent_icon.png',
						text: '腾讯云国际',
						path:'/pages/applyAccount/tencentCloud/tencentCloud'
					},
					{
						icon: '/static/home/aws_icon.png',
						text: 'AWS国际',
						path:'/pages/applyAccount/AWSCloud/AWSCloud'
					},
					{
						icon: '/static/home/gcp_icon.png',
						text: '谷歌云国际',
						path:'/pages/applyAccount/googleCloud/googleCloud'
					}
				],
				inputNum:500,
				numList:[
					{
						num:500,
					},
					{
						num:1000,
					},
					{
						num:2000,
					}
				],
				btnList3: [{
						icon: '/static/home/tencent-hao-1.png',
						text: '预先支付充值金额',
						content:'为了防止有人大批量获取账号，申请账号需要预先支付充值金额（最低预先充值50）。'
					},
					{
						icon: '/static/home/tencent-hao-2.png',
						text: 'USDT-TRC20 扫码支付',
						content:'我们采用USDT-TRC20的收款方式，支付金额必须余页面显示的金额完全相同（注意小数点尾数金额）。'
					},
					{
						icon: '/static/home/tencent-hao-3.png',
						text: '获得账号/充值到账',
						content:'支付成功后页面会跳转到账号信息页面，同时我们会将您预先支付的金额充值到你的国际云账户。'
					},
					{
						icon: '/static/home/tencent-hao-4.png',
						text: '保存账号信息',
						content:'请立即复制并保管好您的账号信息，并登陆腾讯云国际后台查看充值金额是否到账。'
					}
				],
				dialog:{
					show:false,
					info:'',
					successList:[],// 支付成功记录
				}
			}
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode
			})
		},
		mounted() {
			// 查询申请记录
			this.getHistory()
		},
		onHide() {
			clearInterval(timer)
		},
		methods: {
			// 点击按钮
			clickBtn(row) {
				this.activeIndex = row.path
				uni.reLaunch({
					url: row.path
				});
				
			},
			// 支付
			zhifuFn() {
				if (this.inputNum > 0) {
					let req = {
						cloudName: 3, //1阿里云 2腾讯云 3AWS 4华为云
						rechargeAmount: this.inputNum, // 数量
					}
					uni.$http.post(`/wap/saasUser/applyCloud`, req).then(res => {
						if (res.code == 200&&res.data) {
							this.dialog.show = true
							this.dialog.info = res.data
							// 轮训请求结果
							this.lunxun()
						}
					})
				}
			
			},
			lunxun(){
				if(this.dialog.show==true){
					if(timer){
						clearInterval(timer)
					}
					timer = setInterval(()=>{
						uni.$http.get(`/wap/saasUser/applyResult/${this.dialog.info.orderId}`, {}).then(res => {
							if (res.code == 200&&res.data) {
								this.dialog.show = false
								this.dialog.successList = res.data
								// 查询申请记录
								this.getHistory()
								clearInterval(timer)
								
							}else{
								this.dialog.successList = []
							}
						})
					},20000)
				}else{
					clearInterval(timer)
				}
			},
			// 倒计时时间到
			timeupFn(){
				this.dialog.show = false
				uni.showToast({
					title: '支付失败',
					icon:"error"
				});
				this.closeFn()
			},
			closeFn(){
				clearInterval(timer)
			},
			// 查询申请记录
			getHistory(){
				uni.$http.get(`/wap/saasUser/applyRecord?cloudName=3`, {}).then(res => {
					if (res.code == 200&&res.data) {
						this.dialog.successList = res.data
					}else{
						this.dialog.successList = []
					}
				})
			},
			// 点击按钮
			clickBtn2(index) {
				console.log(index);
				this.inputNum = index
			},
			// 复制
			setClipboardData(text){
				uni.setClipboardData({
					data: text,
					success () {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	:deep(.el-step__description){
		padding-right: 0!important;
	}
	.pc {
	}

	.app {
		width: 100%;padding-bottom: 120rpx;
	}
	.activeBtn{
		color: #597EF7;border-color: #597EF7;
	}
</style>